<template>
  <div class="container">
    <div class="container-top">
      <div class="logo-box">
        <div class="logo">
        </div>
        <div class="logo-txt">量准蛋白定量计算后台</div>

        <div
          class="logout-postion"
          @click="logout"
        >
          <svg-icon
            class="logout"
            icon-class="logout"
          />
        </div>
      </div>
    </div>

    <div class="text-center upload-box">
      <div>
        <el-upload
          ref="rebateUpload"
          class="upload-demo"
          drag
          :action="upload"
          name="excel"
          :limit="1"
          :before-upload="beforeUpload"
          :headers="headerUpload"
          :on-success="handleSuccess"
          :on-remove="handleRemove"
          :show-file-list="false"
          :on-error="handleError"
          v-show="isShowUpload"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
        <div class="upload-name-box">
          <div
            class="upload-name"
            v-show="isShowUploadtxt"
          >
            {{uploadFile.name}}
            <span @click="handleRemove">x</span>
          </div>
          <el-progress
            :percentage="percentage"
            :color="customColor"
            v-show="isShowPer"
          ></el-progress>
        </div>
      </div>
    </div>

    <div
      class="container-body"
      v-show="isShowStepOne"
    >
      <img
        :src="stepOneList.img"
        alt=""
        style="margin-bottom:30px;width:100%;"
      >

      <div style="text-align:right;">
        <el-button
          type="text"
          @click="downloadExl()"
          size="mini"
        >导出表格</el-button>
      </div>

      <table
        id="table-2"
        width="100%"
      >
        <tr>
          <td width="50%">
            公式
          </td>
          <td>
            {{stepOneList.formula}}
          </td>
        </tr>
        <tr>
          <td
            v-if="stepOneList.struct.rsquare"
            width="50%"
          >
            R平方
          </td>
          <td>
            {{stepOneList.struct.rsquare}}
          </td>
        </tr>
        <tr v-if="stepOneList.params">
          <td width="50%">参数</td>
          <td>
            <template v-for="(value, key, index) in stepOneList.params">
              <span class="data-item">{{key}}:{{value}}</span>
            </template>
          </td>
        </tr>

        <tr v-if="stepOneList.ng">
          <td width="50%">浓度值</td>
          <td>
            <template v-for="value in stepOneList.ng">
              <span class="data-item">{{value}}</span>
            </template>
          </td>
        </tr>
      </table>

      <div class="space text-center">
      </div>
    </div>
  </div>
</template>
<script>
import easyChart from "@/components/EasyChart";
import { fetchUploadStep2 } from "@/api/table";
import { setStore, getStore } from "@/utils/common";
import { getToken, removeToken } from "@/utils/auth";

export default {
  data() {
    return {
      stepOneList: {
        params: {},
        struct: {},
        ng: "",
        x: ""
      },
      isShowLog: false, //是否显示公式
      isShowStepOne: false, //是否显示第一步表格
      isShowUpload: true,
      isShowUploadtxt: false,
      uploadFile: {},
      exlName: "", //下载表格名
      isShowPer: false,
      percentage: 0,
      customColor: "#e6a23c"
    };
  },
  components: {
    easyChart
  },
  methods: {
    initData() {},
    goNext(route, type) {
      if (type === 1) {
        setStore("chartData", this.lightRate);
      }
      this.$router.push({ path: route });
    },
    beforeUpload(file) {
      this.uploadFile = file;
      this.isShowPer = true;
      this.isShowUpload = false;
      this.isShowUploadtxt = true;
      this.percentage += 60 + Math.floor(Math.random() * 10);
    },
    handleSuccess(file, filelist) {
      if (file.status === 200) {
        const next = 100 - this.percentage;
        this.percentage += next;
        setTimeout(() => {
          this.isShowPer = false;
        }, 1000);
        this.isShowStepOne = true;
        this.exlName = file.data.uuid;
        this.stepOneList = file.data;
      } else {
        this.$message.error("发生错误请联系管理员");
      }
    },
    handleError() {
      this.$message.error("发生错误请联系管理员");
    },
    logout() {
      removeToken();
      this.$router.go("/");
    },
    handleRemove() {
      this.$refs["rebateUpload"].clearFiles(); //清除文件
      //上传框
      this.isShowUpload = true;
      this.isShowUploadtxt = false;
      //上传进度条
      this.percentage = 0;
      //显示进度
      this.isShowPer = false;
      this.stepOneList = {
        params: {},
        struct: {},
        ng: "",
        x: ""
      };
      this.isShowStepOne = false;
    },
    downloadExl() {
      if (this.exlName) {
        const href = `${process.env.BASE_URL}receive/download/excel/${this.exlName}`;
        window.open(href, "_blank");
      }
    }
  },
  computed: {
    upload: () => {
      return `${process.env.BASE_URL}receive/upload/igg`;
    },
    headerUpload: () => {
      const data = {};
      data.TOKEN = getToken();
      return data;
    }
  }
};
</script>
<style lang="less" scoped>
#table-2 {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #d3d8e3;
}
#table-2 tr {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #d3d8e3;
}

#table-2 td:first-child {
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #d3d8e3;
}

/* Padding and font style */
#table-2 td,
#table-2 th {
  padding: 10px 15px;
  font-size: 12px;
  font-family: Verdana;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #d3d8e3;
}

.data-item {
  display: block;
}

@media screen and (min-width: 1000px) {
  .data-item {
    display: inline-block;
    margin-right: 20px;
  }
}
</style>